<template>
    <div id="register">
        <el-dialog title="注册" width="300px" center :visible.sync="isRegister">
            <el-form
                    :model="RegisterUser"
                    :rules="rules"
                    status-icon
                    ref="ruleForm"
                    class="demo-ruleForm"
            >
                <el-form-item prop="name">
                    <el-input
                            prefix-icon="el-icon-user-solid"
                            placeholder="请输入账号"
                            v-model="RegisterUser.name"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input
                            prefix-icon="el-icon-view"
                            type="password"
                            placeholder="请输入密码"
                            v-model="RegisterUser.pass"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="confirmPass">
                    <el-input
                            prefix-icon="el-icon-view"
                            type="password"
                            placeholder="请再次输入密码"
                            v-model="RegisterUser.confirmPass"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="goRegister" style="width:100%;">注册</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import usersApi from "../api/usersApi"
    export default {
        name: "MyRegister",
        data() {
            let validateName = (rule, value, callback) => {
                if (!/^[a-zA-z]\w{5,16}/.test(value)) {
                    return callback(new Error('字母开头,长度5-16之间,允许字母数字下划线'));
                }
                //模拟异步
                /*setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);*/
                console.log("正则规则验证之后的",value)
//                this.ajax
                usersApi.findUserName({userName: value}).then(res=>{
//                    data:
//                        code: "001"
//                        msg: "用户名不存在，可以注册"
                    console.log("成功后的回调",res);
                    let msgData = res.data;
                    if(msgData.code !== "001"){
                        callback(new Error(msgData.msg));
                    }else {
                        callback();
                    }
                })
            };
            return {
                isRegister: false, // 控制注册组件是否显示
                RegisterUser: {
                    name: "",
                    pass: "",
                    confirmPass: ""
                },
                // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
                rules: {
                    name: [{ validator: validateName, trigger: 'blur' }],
                    pass: [{ required: true, message: '请输入活动名称', trigger: 'blur' },],
                    confirmPass: [{ required: true, message: '请输入活动名称', trigger: 'blur' },],
                }
            };
        },
        methods: {
            showRegister(a){
                console.log("showRegister--->",a);
                this.isRegister = true;
            },
            goRegister() {
                // 通过element自定义表单校验规则，校验用户输入的用户信息
                this.$refs["ruleForm"].validate(valid => {
                    //如果通过校验开始注册
                    if (valid) {
                        //发送ajax请求
                        this.isRegister = false;
                        this.$notify({
                            title: '成功',
                            message: '这是一条成功的提示消息',
                            type: 'success'
                        });
                    }
                });
            }
        }
    };
</script>
<style>
</style>